<template>
  <!--新增-->
  <div>
    <el-button type="primary" @click="showWin()">新增</el-button>
    <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="30%"
        append-to-body
    >
      <el-form ref="form" :modal="form" label-width="80px">
        <el-form-item label="商品名称">
          <el-input v-model="form.tname"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">


    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="save()">确 定</el-button>
  </span>
      <!--查询列表-->
    </el-dialog>
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          prop="tid"
          label="类别编号"
          width="180">
      </el-table-column>
      <el-table-column
          prop="tname"
          label="类别名称"
      >
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="150">
        <template slot-scope="scope">
          <el-button type="danger" icon="el-icon-delete" circle @click="del(scope.row)"></el-button>
          <el-button type="primary" icon="el-icon-edit" circle @click="showWin(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "PtypeCom",
  /*查询 */
  created() {
    console.info("界面加载完成之后的事件被执行");
    this.loadData();
  },
  data() {
    return {
      title: '',
      tableData: [],
      dialogVisible: false,
      form: {},
      data: ""
    }
  },
  methods: {
    //点击删除按钮的事件
    del(row) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.info("row", row);
        //往后台发送请求 根据 商品类型id 删除商品类别
        this.$http.post("ptype/del", {tid: row.tid}).then(res => {
          console.info("后台返回的数据", res);
          this.loadData();
        });

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //封装一个方法
    loadData() {
      // 往后态发送请求获取所有的商品类别列表数据
      this.$http.post("ptype/listAll").then(res => {
        console.info("后台返回数据", res);
        this.tableData = res.data;
      });
    },
    //弹出一个窗口
    showWin(row) {
      //判断如果row存在 就给form赋值
      if (row) {
        this.form = row;
        this.title = "修改商品类别信息";
      } else {
        this.form = {};
        this.title = "新增商品类别信息";
      }
      //在浏览器的控制台打印一句话
      console.info("我被调用了")
      //首先界面上要有一个窗口 然后设置窗口展示
      this.dialogVisible = true;
    },
    //保存方法
    save() {
      console.info("我要保存")
      console.info(this.form)
      //往后台发请求  保存商品类别数据 回调函数
      this.$http.post("ptype/saveOrUpdate", this.form).then(res => {
        console.info("后台返回数据", res.data.success);
        //判断如果res.data.success值为1 成功了
        if (res.data.success == 1) {
          //关闭窗口
          this.dialogVisible = false;
          //刷新数据
          this.loadData();
        }
        //否则 就失败
        else {
          alert(res.data.error);
        }
      });
    }
  }
}
</script>

<style scoped>

</style>